ساخت و مدیریت variants در فیگما

مزایای کار با Variants 

• مرور راحت تر کامپوننت ها - یک طراح دیگر نیازی به غربال کردن از طریق تغییرات متعدد از یک جزء در پنل دارایی ندارد یا تعجب می کند که کدام یک درست است.
• کاهش پیچیدگی نمونه ها - به راحتی انتخاب یا تنظیم خواص بدون تغییر کل جزء.
• جلوگیری از باز ساخته شدن اشیاء - اجزای تو در تو و سبک های نادیده گرفته شده در هنگام تغییر و جا به جایی حفظ می شوند.
• سازگاری با نمونه کار های موجود - انواع به طور خودکار هر جزء موجود را جایگزین می کنند، بنابراین مهاجرت برای فایل های موجود نسیم است.

در این آموزش به شما نحوه کار با Vatiants و مدیریت آنها و در عین حال یک سری از مهمترین نکات آن بازگو خواهد شد.

استفاده موثر از Variants

قبل از اینکه کار با Variants ها را شروع کنیم ، مهم است که درک کنیم که چه زمانی استفاده از Variants ها منطقی و چه زمانی از استفاده از آنها اجتناب کنیم . لازم نیست همه چیز یک Variant باشد و شما هنوز هم می توانید از تکنیک های موجود برای طراحی خود استفاده کنید .

شاید این مقاله هم برای شما مفید باشد: چگونه component ها را بسازیم و مدیریت کنیم در فیگما

استفاده از Variants ها زمانی که:

• چندین کامپوننت خصوصیات مشترکی مثل state, size, count, layout و ... داشته باشند.
• کاپوننت ها بتونن بین چند variant با خصوصیات true/false, on/off, or yes/no فعال و غیر فعال بشن.
• انواع کامپوننت ها به خواصی که با اجزای کد شما مطابق با فرمت prop / value مورد استفاده در چارچوب های frontend محبوب مانند React و Vue هستند، داشته باشند.

اجتناب از Variants ها زمانی که:

• اضافه کردن Variants باعث ایجاد تعداد زیادی پارامتر غیر قابل کنترل کنند مثل ، در نظر گرفتن نمونه های تودرتو و یا با استفاده از اجزای پایه.
• استفاده در رنگ ها یا تم ها

Nesting instances

نمونه های تودرتو یک تکنیک قدرتمند برای نوشتن طرح های پیچیده است و می تواند در کنار انواع برای مجموعه های پیچیده تر استفاده شود.

بیایید با یک دکمه شروع کنیم. شما ممکن است چندین ویژگی مانند نوع (اولیه، ثانویه)، حالت (فعال، شناور) یا اینکه ایا دکمه دارای ایکون است یا خیر.

شاید این مقاله هم برای شما مفید باشد: چگونه در فیگما یک انیمیشن ساده بسازیم

شما ممکن است وسوسه شوید که یک نوع برای هر ایکون ممکن تعریف کنید، اما این به سرعت غیر قابل کنترل می شود. بهتر است از یک نمونه از یک ایکون استفاده کنید و نمونه تو در تو را با اجزای سنتی مبادله کنید.

مدیریت کتابخانه

Figma چندین رویکرد برای سازماندهی اجزای پنل دارایی از طریق نامگذاری قراردادهای لایه ها، فریم ها و صفحات ارائه می دهد. همانطور که در راهنمای اماده سازی برای انواع بحث شده است، ساده سازی سیستم طراحی شما با انواع می تواند برخی از این قراردادها را ساده کند و ممکن است دیگران را اخراج کند.

شاید این مقاله هم برای شما مفید باشد: کار با constraints در فیگما

لایه ها - هنگام ترکیب انواع، هر گروه به جلو بریده بریده / در نام لایه به مقادیر برای خواص نوع تبدیل خواهد شد. شما هنوز هم می توانید گروه های forward-slash اضافی را بعد از واقعیت اضافه کنید اگر می خواهید سطوح دیگر سلسله مراتب را اضافه یا بازیابی کنید.

 عکس

فریم ها - فریم ها می توانند برای گروه بندی اجزای مرتبط استفاده شوند. هنگام ترکیب انواع، قاب ممکن است اضافی شود، بنابراین شما می توانید ان را حذف کنید یا از ان به عنوان یک گروه بزرگتر استفاده کنید، اگر چندین مجموعه جزء در صفحه داشته باشید.

صفحات - اگر اجزای اصلی در چندین صفحه داشته باشید، نام صفحه نیز در پانل دارایی ها ظاهر می شود. این امکان وجود دارد که تمام اجزای شما در یک صفحه به یک مجموعه کامپوننت واحد (Buttons / Button) ترکیب شوند. در حالی که این ممکن است تکراری به نظر برسد، نگه داشتن صفحه "دکمه ها" در اینده به اجزای دکمه اضافی اجازه می دهد که ممکن است بخشی از مجموعه اجزای دکمه نباشد.

متناوبا، ممکن است فرصت هایی برای ترکیب صفحات به گروه بندی منطقی تر از مجموعه های جزء وجود داشته باشد. اگر شما با یک صفحه با یک مجموعه جزء ورودی و دیگری با یک Dropdown واحد به پایان رسید، ممکن است ترکیب این را در یک صفحه "Forms" در نظر بگیرید.

اضافه کردن توضیحات واریانت

هر جزء نوع می تواند توصیف خود را داشته باشد، همراه با یک توصیف برای کل مجموعه جزء. توضیحات برای هر دو مجموعه جزء و تنوع خاص در پانل بازرسی ظاهر می شود.

عکس

توضیحات مؤلفه‌های موجود در صورت ترکیب به توصیف‌های مختلف تبدیل می‌شوند تا چیزی را که قبلاً اضافه کرده‌اید را از دست ندهید.